<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>个人主页</title>
    <include file="public@head" />
    <link rel="stylesheet" href="__TMPL__public/assets/css/star.css"/>

</head>
<body>
<include file="public@starnav" />

<div class="center starPageWrapper clearfix">
        <div id="sp_gift_wra" class="layui-tab layui-tab-brief" lay-filter="tab_modify">
            <ul class="layui-tab-title">
                <li class="layui-this">修改背景</li>
                <li>修改头像</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="ic_edit_wra">
                        <p class="tips">Hi，<span class="user_name"></span></p>
                        <div id="back_modify_wra" class="text-center">
                            <img class="star_back_img" src="" alt=""><br />
                            <span>当前背景</span><br />
                            <!-- <form  method="post" action="postData" class=" clearfix" name="test2"  enctype="multipart/form-data">
                                 <input name=img type="file">
                                 <input name="url" type="text" value="Abouts/upload">
                                 <input name=data[udid] type="text" value="13">
                                 <input name=data[token] type="text" value="b8642715dff7ad19b76efb3d5f9e9b5e31dd7673">
                                 <input type="submit">
                             </form>-->
                            <form id="back_upload_form" class="upload-form-com clearfix"  enctype='multipart/form-data'>
                                <input class="fl" id="back-txt" type="text" disabled>
                                <span class="uploadBtn small fl"><input id="iuy" onchange="$('#back-txt').val($(this).val())" type="file" accept="image/jpg,image/jpeg,image/png" name=img><span>浏览</span></span>
                                <div style="clear: both;"></div>
                                <span class="submit fr">上传</span>
                                <input name=udid type="hidden" value="">
                                <input name=token type="hidden" value="">
                                <!-- <input type="submit" class="submit fr">
                                 <input name="udid" id="user_id" type="hidden" value="">
                                 <input name="token" id="user_token" type="hidden" value="">-->
                            </form>
                            <div id="back_upload_confirm" class="displayNone">
                                <div style="width: 376px;height: 284px; position: relative; overflow: hidden; display: inline-block; margin: 24px auto 30px;">
                                    <img class="back_new" src="" alt="">
                                </div>
                                <div class="clearfix">
                                    <span class="hc_confirm_btn fr" style="margin-right: 84px;">完成</span>
                                    <span class="hc_back_btn fr">重新上传</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="ic_edit_wra">
                        <p class="tips">Hi，<span class="user_name"></span></p>

                        <div id="hc_center_wra">
                            <img class="user_img" src="" alt=""><br />
                            <span>当前头像</span><br />
                            <!-- <form  method="post" action="postData" class=" clearfix" name="test2"  enctype="multipart/form-data">
                                 <input name=img type="file">
                                 <input name="url" type="text" value="Abouts/upload">
                                 <input name=data[udid] type="text" value="13">
                                 <input name=data[token] type="text" value="b8642715dff7ad19b76efb3d5f9e9b5e31dd7673">
                                 <input type="submit">
                             </form>-->
                            <form id="hc_upload_form" class="upload-form-com clearfix"  enctype='multipart/form-data'>
                                <input class="fl" id="upTxt" type="text" disabled>
                                <span class="uploadBtn small fl"><input id="back-input" onchange="$('#upTxt').val($(this).val())" type="file" accept="image/jpg,image/jpeg,image/png" name=img><span>浏览</span></span>
                                <div style="clear: both;"></div>
                                <span class="submit fr">上传</span>

                                <input name=udid type="hidden" value="">
                                <input name=token type="hidden" value="">

                                <!-- <input type="submit" class="submit fr">
                                 <input name="udid" id="user_id" type="hidden" value="">
                                 <input name="token" id="user_token" type="hidden" value="">-->
                            </form>
                            <div id="hc_upload_confirm" class="displayNone">
                                <div style="width: 242px;height: 242px; display: inline-block; margin: 24px auto 30px;">
                                    <img class="avatar_new" src="" alt="">
                                </div>
                                <div class="clearfix">
                                    <span class="hc_confirm_btn fr" style="margin-right: 84px;">完成</span>
                                    <span class="hc_back_btn fr">重新上传</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<include file="public@footer" />
<include file="public@starscripts" />
<script>
    $(function(){
        iService.headerMove(7);

        $("input[name=udid]").val(localStorage.udid);
        $("input[name=token]").val(localStorage.token);
        $(".star_back_img").attr("src",localStorage.s_backdrop);
        modify_back();
        layui.use('element', function() {
            var element = layui.element();
            element.on('tab(tab_modify)', function(data){
                //console.log(data);
                switch(data.index)
                {
                    case 0:
                        modify_back();
                        break;
                    case 1:
                        modify_avatar();
                        break;
                    default:
                        console.log("Error");
                }
            });
        });
        function modify_back(){
            $("#back_modify_wra .submit").on("click",function(){
                var file_info = $("#back-txt").val();

                if(file_info!=""){
                    var file_form = new FormData($('#back_upload_form')[0]);//提交表单所有数据
                    $.ajax({
                        type: "post",
                        url: "uploadImg",
                        data: file_form,
                        processData:false,
                        contentType:false,
                        async: true,
                        datatype: "JSON",
                        beforeSend: function(){
                            var uploading = true;
                            console.log(uploading);
                        },
                        success: function (obj) {
                            var data = $.parseJSON(obj);
                            if (data.code == 200) {
                                $("#back_upload_confirm").show();
                                $("#back_upload_form").hide();
                                var $image = $('#back_upload_confirm .back_new');
                                var img_url = "{$simgs}"+data.data.path+data.data.file;
                                $image.attr("src",img_url);
                                $("#back_upload_confirm .hc_confirm_btn").attr({"data-file":data.data.file,"data-path":data.data.path})
                            }
                            if (data.code == 300) {
                                //清除浏览器缓存数据 跳转登录页面，
                                alert(data.data.message);
                                return false;
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log(XMLHttpRequest.readyState);
                            console.log(textStatus);
                            console.log(errorThrown);
                        }
                    });
                }

                $("#back_upload_confirm .hc_back_btn").on("click",function(){
                    $("#back_upload_confirm").hide();
                    $("#back_upload_form").show();
                });

                $("#back_upload_confirm .hc_confirm_btn").on("click",function(){
                    var focus_param = {
                        url:'Stars/backdrop',
                        data:{
                            path:$(this).data("path"),
                            file:$(this).data("file")
                        }
                    };
                    $.JsonRpc(focus_param,function(data){
                        if(data.code==200){
                            localStorage.s_backdrop = data.data.url+data.content.path+data.content.file;
                            location.reload();
                        }

                    })
                });
            });
        }
        function modify_avatar(){
            $("#hc_center_wra .submit").on("click",function(){
                var file_info = $("#upTxt").val();
                if(file_info!=""){
                    var file_form = new FormData($('#hc_upload_form')[0]);//提交表单所有数据
                    $.ajax({
                        type: "post",
                        url: "uploadImg",
                        data: file_form,
                        processData:false,
                        contentType:false,
                        async: true,
                        datatype: "JSON",
                        beforeSend: function(){
                            var uploading = true;
                            console.log(uploading);
                        },
                        success: function (obj) {
                            var data = $.parseJSON(obj);
                            if (data.code == 200) {
                                $("#hc_upload_confirm").show();
                                $("#hc_upload_form").hide();
                                var $image = $('.avatar_new');
                                var img_url = "{$simgs}"+data.data.path+data.data.file;
                                $image.attr("src",img_url);
                                $(".hc_confirm_btn").attr({"data-file":data.data.file,"data-path":data.data.path})
                            }
                            if (data.code == 300) {
                                //清除浏览器缓存数据 跳转登录页面，
                                alert(data.data.message);
                                return false;
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log(XMLHttpRequest.readyState);
                            console.log(textStatus);
                            console.log(errorThrown);
                        }
                    });
                }

                $(".hc_back_btn").on("click",function(){
                    $("#hc_upload_confirm").hide();
                    $("#hc_upload_form").show();
                });

                $(".hc_confirm_btn").on("click",function(){
                    var focus_param = {
                        url:'Users/edit',
                        data:{
                            path:$(this).data("path"),
                            file:$(this).data("file")
                        }
                    };
                    $.JsonRpc(focus_param,function(data){
                        if(data.code==200){
                            localStorage.u_avatar = data.data.u_avatar;
                            location.reload();
                        }
                    })
                });
            });
        }

    });

</script>
</body>
</html>